<template>
  <div
    class="container"
    style="
      overflow: auto;
      min-height: 100vh;
      width: 1650px;
      margin: 0 auto;
      background-color: #fff;
      padding: 0px 20px;
    "
  >
    <span
      class="but"
      style="
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        /* width: 1650px; */
      "
    >
      <el-button type="primary" icon="el-icon-back" @click="goBack"
        >返回</el-button
      >
      <span>
        <el-button
          type="success"
          icon="el-icon-check"
          v-if="!isView"
          @click="saveData"
          >保存</el-button
        >
        <el-button type="" icon="el-icon-menu" @click="goToList"
          >列表</el-button
        >
        <el-button type="info" icon="el-icon-printer" @click="printForm"
          >打印</el-button
        >
      </span>
    </span>
    <div>
      <table style="line-height: 25px; font-size: 12px; line-height: 30px">
        <caption>
          <h1 style="font-size: 2.2em">员工离职程序二联单</h1>
        </caption>
        <tbody style="display: flex; white-space: nowrap; width: 100%">
          <div class="leftTable" style="margin-right: 20px">
            <table border="1" style="border-collapse: collapse">
              <tr>
                <td>姓名</td>
                <td>
                  <input type="text" v-model="leftName" :disabled="isView" />
                </td>
                <td>性别</td>
                <td>
                  <input type="text" v-model="leftGender" :disabled="isView" />
                </td>
              </tr>
              <tr>
                <td>所在部门</td>
                <td>
                  <input
                    type="text"
                    v-model="leftDepartment"
                    :disabled="isView"
                  />
                </td>
                <td>现任职务</td>
                <td>
                  <input
                    type="text"
                    v-model="leftPosition"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td>进厂日期</td>
                <td colspan="3">
                  <input
                    type="date"
                    v-model="leftEntryDate"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td>离厂日期</td>
                <td colspan="3">
                  <input
                    type="date"
                    v-model="leftLeaveDate"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr rowspan="6">
                <td colspan="4">
                  <label style="float: left" for="">离厂原因:</label><br />
                  <textarea
                    name=""
                    id=""
                    cols="70"
                    rows="20"
                    v-model="leftResignationReason"
                    :disabled="isView"
                  ></textarea>
                </td>
              </tr>
              <tr>
                <td>批注人</td>
                <td colspan="3">
                  <input
                    type="text"
                    v-model="leftAnnotator"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td>经办人</td>
                <td colspan="3">
                  <input type="text" v-model="leftHandler" :disabled="isView" />
                </td>
              </tr>
              <tr>
                <td>备注</td>
                <td colspan="3">
                  <input
                    type="text"
                    v-model="leftForm.remark"
                    :disabled="isView"
                  />
                </td>
              </tr>
            </table>
          </div>
          <div class="rightTable">
            <table border="1" style="border-collapse: collapse">
              <tr>
                <td>姓名</td>
                <td>
                  <input type="text" v-model="rightName" :disabled="isView" />
                </td>
                <td>性别</td>
                <td>
                  <input type="text" v-model="rightGender" :disabled="isView" />
                </td>
                <td>所在部门</td>
                <td>
                  <input
                    type="text"
                    v-model="rightDepartment"
                    :disabled="isView"
                  />
                </td>
                <td>现任职务</td>
                <td>
                  <input
                    type="text"
                    v-model="rightPosition"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td>进厂日期</td>
                <td colspan="3">
                  <input
                    type="date"
                    v-model="rightEntryDate"
                    :disabled="isView"
                  />
                </td>
                <td>离厂日期</td>
                <td colspan="3">
                  <input
                    type="date"
                    v-model="rightLeaveDate"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr rowspan="4">
                <td colspan="8">
                  <label style="float: left" for="">离厂原因:</label><br />
                  <textarea
                    name=""
                    id=""
                    cols="145"
                    rows="5"
                    v-model="rightResignationReason"
                    :disabled="isView"
                  ></textarea>
                </td>
              </tr>
              <tr>
                <td>批准人</td>
                <td>
                  <input
                    type="text"
                    v-model="rightForm.approver"
                    :disabled="isView"
                  />
                </td>
                <td>日期</td>
                <td>
                  <input
                    type="date"
                    v-model="rightForm.approverDate"
                    :disabled="isView"
                  />
                </td>
                <td>经办人</td>
                <td>
                  <input
                    type="text"
                    v-model="rightHandler"
                    :disabled="isView"
                  />
                </td>
                <td>日期</td>
                <td>
                  <input
                    type="date"
                    v-model="rightForm.handlerDate"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <td>到所属的部门<br />办理工作移交</td>
                <td colspan="7">
                  <textarea
                    cols="120"
                    rows="3"
                    v-model="rightForm.departmentTransfer"
                    :disabled="isView"
                  ></textarea
                  ><br />
                  <span style="display: flex; justify-content: space-around">
                    <span
                      >组长：<input
                        type="text"
                        v-model="rightForm.teamLeader"
                        :disabled="isView"
                    /></span>
                    <span
                      >主管：<input
                        type="text"
                        v-model="rightForm.supervisor"
                        :disabled="isView"
                    /></span>
                    <span
                      >经理：<input
                        type="text"
                        v-model="rightForm.manager"
                        :disabled="isView"
                    /></span>
                    <span
                      ><input
                        type="date"
                        v-model="rightForm.sectionDate"
                        :disabled="isView"
                    /></span>
                  </span>
                </td>
              </tr>
              <tr>
                <td>到品质部门及<br />仓库办理移交</td>
                <td colspan="7">
                  <textarea
                    cols="120"
                    rows="3"
                    v-model="rightForm.qualityAndWarehouseTransfer"
                    :disabled="isView"
                  ></textarea
                  ><br />
                  <span style="display: flex; justify-content: space-around">
                    <span
                      >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                      品检：<input
                        type="text"
                        v-model="rightForm.qualityInspector"
                        :disabled="isView"
                      />
                    </span>
                    <span
                      >仓管：<input
                        type="text"
                        v-model="rightForm.warehouseman"
                        :disabled="isView"
                    /></span>
                    <input
                      type="date"
                      v-model="rightForm.warehouseDate"
                      :disabled="isView"
                    />
                  </span>
                </td>
              </tr>
              <tr>
                <td rowspan="4">到企业管理部<br />办理移交</td>
                <td colspan="7">
                  <span style="display: flex; justify-content: space-around">
                    <span>
                      <input
                        type="checkbox"
                        v-model="rightForm.isBadgeReturned"
                        :disabled="isView"
                      />
                      厂牌已回收
                    </span>
                    <span>
                      <input
                        type="checkbox"
                        v-model="rightForm.isSystemDataDeleted"
                        :disabled="isView"
                      />
                      系统资料已删除
                    </span>
                    <span
                      >经办人：<input
                        type="text"
                        v-model="rightForm.handler1"
                        :disabled="isView"
                    /></span>
                    <span
                      >日期：<input
                        type="date"
                        v-model="rightForm.date1"
                        :disabled="isView"
                    /></span>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="7">
                  <span style="display: flex; justify-content: space-around">
                    <span>
                      <input
                        type="checkbox"
                        v-model="rightForm.isSocialSecurityWithdrawn"
                        :disabled="isView"
                      />
                      社保已退（未结算社保费用：<input
                        type="text"
                        v-model="rightForm.unsettledSocialSecurityCost"
                        :disabled="isView"
                      />）
                    </span>
                    <span
                      >经办人：<input
                        type="text"
                        v-model="rightForm.handler2"
                        :disabled="isView"
                    /></span>
                    <span
                      >日期：<input
                        type="date"
                        v-model="rightForm.date2"
                        :disabled="isView"
                    /></span>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="7">
                  <span style="display: flex; justify-content: space-around">
                    <span>
                      <input
                        type="checkbox"
                        v-model="rightForm.isDormReturned"
                        :disabled="isView"
                      />
                      宿舍已归还
                    </span>
                    <span>
                      <input
                        type="checkbox"
                        v-model="rightForm.isBelongingsMovedOut"
                        :disabled="isView"
                      />
                      物品行李已搬出
                    </span>
                    <span
                      >经办人：<input
                        type="text"
                        v-model="rightForm.handler3"
                        :disabled="isView"
                    /></span>
                    <span
                      >日期：<input
                        type="date"
                        v-model="rightForm.date3"
                        :disabled="isView"
                    /></span>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="7">
                  <span style="display: flex; justify-content: space-around">
                    <span>
                      行政后勤未结算费用明细：<input
                        type="text"
                        v-model="rightForm.unsettledLogisticsCost"
                        :disabled="isView"
                      />
                    </span>
                    <span
                      >经办人：<input
                        type="text"
                        v-model="rightForm.handler4"
                        :disabled="isView"
                    /></span>
                    <span
                      >日期：<input
                        type="date"
                        v-model="rightForm.date4"
                        :disabled="isView"
                    /></span>
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </tbody>
        <p
          style="display: flex; justify-content: space-between; color: #757575"
        >
          <span>表单编号及版本：AM-JY-198 A/0</span>
          <span>保存期限：长期</span>
        </p>
      </table>
    </div>
  </div>
</template>

<script>
import { saveResignation, getResignationById } from "@/api/resignation";

export default {
  data() {
    return {
      isView: false,
      leftForm: {
        remark: "",
      },
      rightForm: {
        approver: "",
        approverDate: "",
        handlerDate: "",
        departmentTransfer: "",
        teamLeader: "",
        supervisor: "",
        manager: "",
        sectionDate: "",
        qualityAndWarehouseTransfer: "",
        qualityInspector: "",
        warehouseman: "",
        warehouseDate: "",
        isBadgeReturned: false,
        isSystemDataDeleted: false,
        handler1: "",
        date1: "",
        isSocialSecurityWithdrawn: false,
        unsettledSocialSecurityCost: "",
        handler2: "",
        date2: "",
        isDormReturned: false,
        isBelongingsMovedOut: false,
        handler3: "",
        date3: "",
        unsettledLogisticsCost: "",
        handler4: "",
        date4: "",
      },
      // 共享数据对象
      sharedForm: {
        name: "",
        gender: "",
        department: "",
        position: "",
        entryDate: "",
        leaveDate: "",
        resignationReason: "",
        // 添加共享的批注人和经办人字段
        annotator: "",
        handler: "",
      },
    };
  },
  computed: {
    // 左表单的计算属性
    leftName: {
      get() {
        return this.sharedForm.name;
      },
      set(value) {
        this.sharedForm.name = value;
      },
    },
    leftGender: {
      get() {
        return this.sharedForm.gender;
      },
      set(value) {
        this.sharedForm.gender = value;
      },
    },
    leftDepartment: {
      get() {
        return this.sharedForm.department;
      },
      set(value) {
        this.sharedForm.department = value;
      },
    },
    leftPosition: {
      get() {
        return this.sharedForm.position;
      },
      set(value) {
        this.sharedForm.position = value;
      },
    },
    leftEntryDate: {
      get() {
        return this.sharedForm.entryDate;
      },
      set(value) {
        this.sharedForm.entryDate = value;
      },
    },
    leftLeaveDate: {
      get() {
        return this.sharedForm.leaveDate;
      },
      set(value) {
        this.sharedForm.leaveDate = value;
      },
    },
    leftResignationReason: {
      get() {
        return this.sharedForm.resignationReason;
      },
      set(value) {
        this.sharedForm.resignationReason = value;
      },
    },
    // 右表单的计算属性
    rightName: {
      get() {
        return this.sharedForm.name;
      },
      set(value) {
        this.sharedForm.name = value;
      },
    },
    rightGender: {
      get() {
        return this.sharedForm.gender;
      },
      set(value) {
        this.sharedForm.gender = value;
      },
    },
    rightDepartment: {
      get() {
        return this.sharedForm.department;
      },
      set(value) {
        this.sharedForm.department = value;
      },
    },
    rightPosition: {
      get() {
        return this.sharedForm.position;
      },
      set(value) {
        this.sharedForm.position = value;
      },
    },
    rightEntryDate: {
      get() {
        return this.sharedForm.entryDate;
      },
      set(value) {
        this.sharedForm.entryDate = value;
      },
    },
    rightLeaveDate: {
      get() {
        return this.sharedForm.leaveDate;
      },
      set(value) {
        this.sharedForm.leaveDate = value;
      },
    },
    rightResignationReason: {
      get() {
        return this.sharedForm.resignationReason;
      },
      set(value) {
        this.sharedForm.resignationReason = value;
      },
    },
    // 添加批注人的计算属性
    leftAnnotator: {
      get() {
        return this.sharedForm.annotator;
      },
      set(value) {
        this.sharedForm.annotator = value;
      },
    },
    rightAnnotator: {
      get() {
        return this.sharedForm.annotator;
      },
      set(value) {
        this.sharedForm.annotator = value;
      },
    },
    // 添加经办人的计算属性
    leftHandler: {
      get() {
        return this.sharedForm.handler;
      },
      set(value) {
        this.sharedForm.handler = value;
      },
    },
    rightHandler: {
      get() {
        return this.sharedForm.handler;
      },
      set(value) {
        this.sharedForm.handler = value;
      },
    },
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.fetchData(id);
    }
    this.isView = type === "view";
  },
  methods: {
    formatDate(date) {
      if (!date) return "";
      // 如果是数组格式，转换为YYYY-MM-DD格式
      if (Array.isArray(date)) {
        const [year, month, day] = date;
        // 月份和日期补零
        const formattedMonth = month.toString().padStart(2, "0");
        const formattedDay = day.toString().padStart(2, "0");
        return `${year}-${formattedMonth}-${formattedDay}`;
      }
      // 如果是字符串格式（包含T的ISO格式）
      if (typeof date === "string" && date.includes("T")) {
        return date.split("T")[0];
      }
      return date;
    },
    fetchData(id) {
      getResignationById(id).then((response) => {
        const data = response.data;
        // 将后端数据转换为表单数据
        console.log("data", data);
        // 更新共享数据
        this.sharedForm = {
          name: data.empName,
          gender: data.empGender,
          department: data.empDepartment,
          position: data.empPosition,
          entryDate: this.formatDate(data.entryDate),
          leaveDate: this.formatDate(data.leaveDate),
          resignationReason: data.resignationReason,
          annotator: data.annotator,
          handler: data.handler,
        };
        // 更新左表单特有数据
        this.leftForm = {
          remark: data.remark,
        };
        // 更新右表单特有数据
        this.rightForm = {
          approver: data.approver,
          approverDate: this.formatDate(data.approverDate),
          handlerDate: this.formatDate(data.handlerDate),
          departmentTransfer: data.departmentTransfer,
          teamLeader: data.teamLeader,
          supervisor: data.supervisor,
          manager: data.manager,
          sectionDate: this.formatDate(data.sectionDate),
          qualityAndWarehouseTransfer: data.qualityWarehouseTransfer,
          qualityInspector: data.qualityInspector,
          warehouseman: data.warehouseman,
          warehouseDate: this.formatDate(data.warehouseDate),
          isBadgeReturned: data.isBadgeReturned,
          isSystemDataDeleted: data.isSystemDataDeleted,
          handler1: data.handler1,
          date1: this.formatDate(data.date1),
          isSocialSecurityWithdrawn: data.isSocialSecurityWithdrawn,
          unsettledSocialSecurityCost: data.unsettledSocialSecurityCost,
          handler2: data.handler2,
          date2: this.formatDate(data.date2),
          isDormReturned: data.isDormReturned,
          isBelongingsMovedOut: data.isBelongingsMovedOut,
          handler3: data.handler3,
          date3: this.formatDate(data.date3),
          unsettledLogisticsCost: data.unsettledLogisticsCost,
          handler4: data.handler4,
          date4: this.formatDate(data.date4),
        };
      });
    },
    saveData() {
      // 表单验证
      if (!this.sharedForm.name) {
        this.$message.error("员工姓名不能为空");
        return;
      }
      if (!this.sharedForm.department) {
        this.$message.error("所在部门不能为空");
        return;
      }
      if (!this.sharedForm.entryDate) {
        this.$message.error("进厂日期不能为空");
        return;
      }
      if (!this.sharedForm.leaveDate) {
        this.$message.error("离厂日期不能为空");
        return;
      }

      // 构造保存数据
      const dataToSave = {
        id: this.$route.query.id,
        empName: this.sharedForm.name,
        empGender: this.sharedForm.gender,
        empDepartment: this.sharedForm.department,
        empPosition: this.sharedForm.position,
        entryDate: this.sharedForm.entryDate,
        leaveDate: this.sharedForm.leaveDate,
        resignationReason: this.sharedForm.resignationReason,
        annotator: this.leftAnnotator,
        handler: this.leftHandler,
        remark: this.leftForm.remark,
        approver: this.rightForm.approver,
        approverDate: this.rightForm.approverDate,
        handlerDate: this.rightForm.handlerDate,
        departmentTransfer: this.rightForm.departmentTransfer,
        teamLeader: this.rightForm.teamLeader,
        supervisor: this.rightForm.supervisor,
        manager: this.rightForm.manager,
        sectionDate: this.rightForm.sectionDate,
        qualityWarehouseTransfer: this.rightForm.qualityAndWarehouseTransfer,
        qualityInspector: this.rightForm.qualityInspector,
        warehouseman: this.rightForm.warehouseman,
        warehouseDate: this.rightForm.warehouseDate,
        isBadgeReturned: this.rightForm.isBadgeReturned,
        isSystemDataDeleted: this.rightForm.isSystemDataDeleted,
        handler1: this.rightForm.handler1,
        date1: this.rightForm.date1,
        isSocialSecurityWithdrawn: this.rightForm.isSocialSecurityWithdrawn,
        unsettledSocialSecurityCost: this.rightForm.unsettledSocialSecurityCost,
        handler2: this.rightForm.handler2,
        date2: this.rightForm.date2,
        isDormReturned: this.rightForm.isDormReturned,
        isBelongingsMovedOut: this.rightForm.isBelongingsMovedOut,
        handler3: this.rightForm.handler3,
        date3: this.rightForm.date3,
        unsettledLogisticsCost: this.rightForm.unsettledLogisticsCost,
        handler4: this.rightForm.handler4,
        date4: this.rightForm.date4,
      };

      saveResignation(dataToSave)
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
          this.$router.push("/main/renshi/renshizhidu/yglizhi/yglizhiList");
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    goToList() {
      this.$router.push("/main/renshi/renshizhidu/yglizhi/yglizhiList");
    },
    goBack() {
      this.$router.push(
        "/main/renshi/renshidiaodong/yuangonglizhi/yuangonglizhi"
      );
    },
    printForm() {
      // 创建一个样式元素
      const style = document.createElement("style");
      style.type = "text/css";
      style.media = "print";
      style.textContent = "@page { size: A4 landscape; }";

      // 将样式添加到文档头部
      document.head.appendChild(style);
      // 执行打印
      window.print();
      // 打印完成后移除样式
      document.head.removeChild(style);
    },
  },
};
</script>

<style scoped>
tr td {
  padding: 3px;
}

input {
  font-family: "宋体";
  font-size: 13px;
  border: 0px;
}

textarea {
  padding: 10px;
  font-family: "宋体";
  font-size: 13px;
  outline: none;
  border: 0px;
}

span {
  display: flex;
  align-items: center;
}

/* button {
    padding: 4px 9px;
} */
@media print {
  @page {
    margin: 0;
  }
  .but {
    display: none !important;
  }
}
</style>